<template>
	<view :class="['whiteCardBox', activeClick ? 'activeClick':'']"
		:style="{ alignItems: props.alignItems ,paddingTop: props.paddingTop + 'rpx', paddingLeft: props.paddingLeft + 'rpx', paddingBottom: props.paddingBottom + 'rpx', marginTop: props.marginTop + 'rpx', flexDirection: props.flexDirection, borderRadius: props.borderRadius + 'rpx' }">
		<slot></slot>
	</view>
</template>
<script setup>
	const props = defineProps({
		borderRadius: {
			type: [String, Number],
			default: () => {
				return 10
			}
		},
		flexDirection: {
			type: String,
			default: () => {
				return 'column'
			}
		},
		marginTop: {
			type: [String, Number],
			default: () => {
				return '0'
			}
		},
		paddingBottom: {
			type: [String, Number],
			default: () => {
				return '0'
			}
		},
		paddingLeft: {
			type: [String, Number],
			default: () => {
				return '0'
			}
		},
		paddingTop: {
			type: [String, Number],
			default: () => {
				return '0'
			}
		},
		alignItems: {
			type: String,
			default: () => {
				return 'flex-start'
			}
		},
		activeClick: {
			type: Boolean,
			default: () => {
				return false
			}
		}
	})
</script>
<style lang="scss" scoped>
	.whiteCardBox {
		width: 710rpx;
		margin: 0 auto;
		display: flex;
		flex-wrap: wrap;
		background: #FFFFFF;
		border-radius: 10rpx;
	}

	.activeClick {
		&:active {
			opacity: 0.7;
		}
	}
</style>